<!DOCTYPE html>
<html lang="zh_CN" style="overflow: hidden;">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">
  <meta charset="utf-8">
  <title>请输入密码</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="/static/js/jquery.validate.min.js"></script>
  <script type="text/javascript" src="/static/plugin/layer/layer.js"></script>
</head>
<style type="text/css">
  body{
    background-color: #f0f2f5;
  }
  a{
    text-decoration:none;
    cursor:hand;
  }
  a:hover{
    text-decoration:none;
  }
  .password-box {
    background-size: cover;
    align-items: center;
    justify-items: center;
    margin:150px auto;
  }
  .picture {
    text-align: center;
    padding: 20px 0;
  }
  .picture img {
    width:100px;
  }
  .js-ajax-from {
    display: flex;
    height: 80px;
    margin: 0 auto;
    max-width: 640px;
    min-width: 320px;
    text-align: center;
  }
  .form-input{
      width: 80%;
  }
  .form-input em.invalid {
    display: block;
    text-align: left;
    padding: 10px;
    color: #f44336;
    font-weight: 400;
    font-size: 13px;
    font-style: normal;
  }
  .form-button{
    width: 20%;
  }
  input[name=password]{
    display: block;
    width: 90%;
    height: 45px;
    color: #000;
    border: 1px solid #e3e6e7;
    border-left: 3px solid #506ee4;
    padding-left: 5%;
  }
  .input-button {
    display: block;
    text-align:center;
    background-color: #506ee4;
    color: #fff;
    border: 0;
    width: 100%;
    height: 47px;
  }
  .input-button:hover {
    color: #fff;
  }
</style>
<body>

<div class="password-box">
      <div class="picture">
          <img src="/static/images/lock.png" />
      </div>
      <form method="post" class="js-ajax-from">
          <div class="form-input">
            <input name="password" id="password" placeholder="请输入密码" />
            <em for="password" class="invalid"></em>
          </div>
          <div class="form-button">
            <button type="submit" class="input-button js-submit">确认</button>
            <input type="hidden" name="keyword" value="{$keyword}" />
          </div>
      </form>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".js-ajax-from").validate({
            rules: {
                password: {
                    required: true,
                }
            },
            messages: {
                password: {
                    required: "请输入密码",
                }
            },
            submitHandler: function() {
                $.ajax({
                    url: "{:url('index/checkPassword')}",
                    type: "POST",
                    data: $(".js-ajax-from").serialize(),
                    dataType: 'json',
                    async: true,
                    success: function (res) {
                        if (res.errorCode === 200) {
                            window.location.href = res.data.link;
                        } else {
                            layer.alert(res.message, {
                              title: '提示',
                              icon: 2
                            });
                        }
                    }
                });
            },
            errorPlacement: function(error, element) {
              error.insertAfter(element.parent());
            }
      });
    });
</script>
</body>
</html>